<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入一个外部样式表 -->
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			/*
				内部样式表
				外部样式表
				内联属性
				优先级
					内联属性优先级最高，但是内部样式表和外部样式的优先级由它的代码行号决定
						行号越大优先级越高
			*/
			/* 标签选择器 */
			div {
				color: white;
				padding: 20px;
			}

			/* 类选择器
				在定义的时候一定是以.开头，但在使用时候不需要.
			*/
			.blue {
				color: blue;
			}

			.back {
				background-color: #00FFFF;
			}

			/* id选择器
				以#开头，只能影响一个
			*/
			#myDiv {
				color: yellow;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<!-- 内联属性，优先级最高 -->
		<div style="background-color: red;">
			哈俣
		</div>
		<div style="background-color: red;">
			哈俣
			<div class="blue back">
				哈俣
			</div>
		</div>
		<div id="myDiv">
			哈俣
		</div>
	</body>
</html>
